<template>
  <div>
    <el-form>
      <el-col :span="item.fieldType === 'TextArea'?8:8"
              v-for="(item,index) in data"
              :key="index"
              class="header-item">
        <div @click="$emit('edit',item)">
          <el-form-item :label="item.fieldName">
            <!-- 输入框 -->
            <el-input v-if="getType(item) === 'input'"
                      v-model="fh"
                      :type="item.fieldType?mapping[item.fieldType][item.dataType].type:''"
                      :readonly="readonly"
                      :disabled="readonly"></el-input>
            <!-- 选择框 -->
            <el-select v-else-if="getType(item) === 'select'"
                       :readonly="readonly"
                       :disabled="readonly"
                       v-model="fh"
                       placeholder="">
            </el-select>
            <!-- 日期 -->
            <el-date-picker v-else-if="getType(item) === 'datepicker' || getType(item) === 'timepicker'"
                            placeholder=""
                            :type="item.fieldType?mapping[item.fieldType][item.dataType].type:'date'"
                            v-model="fh"
                            :readonly="readonly"
                            :disabled="readonly"></el-date-picker>
            <!-- 数字输入框 -->
            <el-input-number v-else-if="getType(item) === 'number'"
                             :readonly="readonly"
                             :controls="false"
                             v-model="fh"
                             :disabled="readonly"></el-input-number>
            <!-- 多选框 -->
            <el-checkbox-group v-model="fh"
                               v-else-if="getType(item) === 'checkbox'"
                               :readonly="readonly"
                               :disabled="readonly">
              <el-checkbox v-for="io in item.dataSource"
                           :key="io.value"
                           :label="io.label"
                           :value="io.value"></el-checkbox>
            </el-checkbox-group>
            <!-- 单选框 -->
            <el-radio-group v-model="fh"
                            v-else-if="getType(item) === 'radio'"
                            :readonly="readonly"
                            :disabled="readonly">
              <el-radio v-for="io in item.dataSource"
                        :key="io.value"
                        :label="io.label"
                        :value="io.value"></el-radio>
            </el-radio-group>
            <!-- 树状 -->
            <el-tree v-else-if="getType(item) === 'tree'"></el-tree>
            <!-- 文件上传 -->
            <el-upload v-else-if="getType(item) === 'upload'"
                       class="upload-demo"
                       :disabled="readonly">
              <el-button size="small"
                         type="primary"
                         :disabled="readonly">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </div>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { mapping } from './info'
import { remote } from '../../api/admin/dict' //字典

export default {
  props: {
    data: {
      type: Array,
      default: []
    },
    readonly: {
      type: Boolean,
      default: true
    },
    orgId: {
      type: Number,
      defaulta: 0
    }
  },
  watch: {
    data: {
      handler: 'arrayParsing',
      deep: true
    }
  },
  data () {
    return {
      fh: '',
      mapping,
      index: 0,
      analysisFlag: true
    }
  },
  methods: {
    arrayParsing () {
      for (let k = 0; k < this.data.length; k++) {
        if (typeof (this.data[k]) === 'object' && this.data[k].dataSource && typeof (this.data[k].dataSource) !== 'object') {
          // 解析数据源
          try {
            // 如果是json
            this.data[k].dataSource = JSON.parse(this.data[k].dataSource)
          }
          catch (err) {
            // 如果是数据字典
            remote({ paramId: this.data[k].dataSource, orgId: this.orgId }).then(res2 => {
              this.data[k].dataSource = []
              res2.data.data.some(res3 => {
                this.data[k].dataSource.push({
                  label: res3.label,
                  value: res3.id
                })
              })
            })
          }
        }
      }
    },
    getType (value) {
      return value.fieldType ? this.mapping[value.fieldType][value.dataType].element : this.mapping[value]
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.header-item {
  padding: 0 10px;
}
/deep/.el-select {
  width: 100%;
}
/deep/.el-date-editor {
  width: 100% !important;
}
/deep/.el-input-number--medium {
  width: 100%;
  line-height: 26px;
  input {
    text-align: left;
  }
}
</style>